<template>
	<view>
		<view style="display:flex;justify-content:center; padding: 20px;">
			<input type="text" class="text" placeholder="搜索..." placeholder-class="placeholder" v-model="button"
				@click="tiaozhaun()" />
				<view style="line-height: 30px; font-size: 30px; margin-left: 20px;" @click="gengxin()">应用更新</view>
		</view>
		<view style="width: 100%; background-color: #ccc;
		padding: 10px;">推荐卡片</view>
		<view class="top">
			<!-- App 图标、背景、名称、介绍、【下载】按钮 -->
			<view v-for="(item,index) in data" :key="index">
				<image :src="'http://124.93.196.45:10001/dev-api'+item.logoPic" mode="" mode="aspectFit"></image>
				<text class="apkName">\n{{item.apkName}}\n</text>
				<text class="introduce" >{{item.introduce}}\n</text>
				<text class="pink" v-if="item.apkName!=null" @click="xiazai(item.apkName)">下载</text>
			</view>
		</view>
		<view style="width: 100%; background-color: #ccc;
		padding: 10px;">专题列表</view>
		<view class="buttom">
			<view v-for="(item,index) in data" :key="index">
				<!-- App 名称、App缩略图、下载次数、【下载】按钮 -->
				<image :src="'http://124.93.196.45:10001/dev-api'+item.logoPic" mode="" mode="aspectFit"></image>
				<text class="apkName">\n{{item.apkName}}\n</text>
				<text class="introduce" v-if="item.apkName!=null">下载次数：{{item.apkDownNum}}万\n</text>
				<text class="pink" v-if="item.apkName!=null" @click="xiazai(item.apkName)">下载</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	export default {
		data() {
			return {
				button: "",
				token: "",
				data: null,
			}
		},
		methods: {
			xiazai(a) {
				uni.showToast({
					title: a + "正在下载...",
					icon: "none",
					duration: 2000
				})
			},
			tiaozhaun() {
				uni.navigateTo({
					url: "/pages/ApplicationMarket/sousuo/sousuo"
				})
			},
			gengxin(){
				uni.navigateTo({
					url:'/pages/ApplicationMarket/gengxin/gengxin'
				})
			}
		},
		onLoad() {
			uni.setStorageSync("ulr", "http://124.93.196.45:10001") //做完注释
			var ulr = uni.getStorageSync("ulr")
			if (uni.getStorageSync("token") == "") {
				uni.showToast({
					title: "暂未登录,跳转到主页",
					icon: 'none',
					duration: 2000
				})
			}
			var today = new Date();

			var date = today.getDate();
			uni.request({
				method: 'POST',
				url: ulr + "/dev-api/login",
				data: {
					"username": "16613322619",
					"password": "123456"
				},
				complete: (res) => {
					this.token = res.data.token;
					uni.request({
						method: 'GET',
						url: ulr + "/dev-api/bs-app-store/app/list",
						header: {
							"Authorization": "Bearer " + this.token
						},
						complete: (res) => {
							console.log(res);
							this.data = res.data.data
							uni.setStorageSync("data",this.data)
							console.log(this.data);
						}
					})
				}

			})


		}
	}
</script>

<style scoped>
	.top {
		display: flex;
	}

	.text {
		width: 300px;
		padding: 5px;
		text-align: center;
		border-radius: 20px;
		border: 1px solid #000;
	}

	.button {
		height: 34px;
		line-height: 34px;
		background-color: blue;
		color: #fff;
		width: 100px;
		text-align: center;
		border-radius: 20px;
	}
	.buttom{display: flex;}
	.top>view {
		margin: 20px 50px;
		width: 200px;
		background-repeat: no-repeat;
		background-size: cover;
		text-overflow: ellipsis;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.buttom>view{
		margin: 20px 50px;
		width: 200px;
		background-repeat: no-repeat;
		background-size: cover;
		text-overflow: ellipsis;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.top image {
		width: 100px;
		height: 100px;
	}
	.buttom image{
		width: 100px;
		height: 100px;
	}
	.top .apkName {
		font-weight: bold;
	}
	.buttom .apkName {
		font-weight: bold;
	}
	.top .introduce {
		width: 100px;
		font-size: 10px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.buttom .introduce{
		width: 100px;
		font-size: 10px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.buttom .pink {
		margin-top: 20px;
		padding: 5px 10px;
		background-color: blue;
		border-radius: 5px;
		color: #fff;
	}
	.top .pink {
		margin-top: 20px;
		padding: 5px 10px;
		background-color: blue;
		border-radius: 5px;
		color: #fff;
	}
</style>